<template>
    <div>
        <!-- 搜索 -->
        <div class="search">
            <el-select
                v-model="searchData.value"
                value-key="desc"
                placeholder="请选择"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            <el-input
                style="width: 400px"
                v-model="searchData.input"
                placeholder="请输入内容"
            ></el-input>

            <el-button type="primary" @click="getOrders(searchData)"
                >搜索</el-button
            >
            <select
                name=""
                id="ordersState"
                v-model="searchData.state"
                @change="getOrders(searchData)"
            >
                <option value="">全部订单</option>
                <option value="1">未支付订单</option>
                <option value="2">已支付订单</option>
                <option value="3">已取消订单</option>
                <option value="4">已完成订单</option>
            </select>
        </div>
        <!-- 表格 -->
        <el-table :data="ordersData" style="width: 100%">
            <el-table-column label="订单编号" width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row._id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="租车位置">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.parkingLocation
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="下单时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.orderStart
                    }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" @click="dialogVisible = true"
                        >查看详情</el-button
                    >
                    <!-- 查看详情弹窗 -->
                    <el-dialog
                        title="订单详情"
                        :visible.sync="dialogVisible"
                        width="40%"
                        :before-close="handleClose"
                    >
                        <table id="a" cellspacing="0">
                            <tr>
                                <td>订单编号</td>
                                <td colspan="2">1234</td>
                            </tr>
                            <tr>
                                <td>用户姓名</td>
                                <td>上周</td>
                                <td><button>联系用户</button></td>
                            </tr>
                            <tr>
                                <td>用户车牌</td>
                                <td colspan="2"><button>川A56767</button></td>
                            </tr>
                            <tr>
                                <td>下单时间</td>
                                <td colspan="2">2020-1-1 12：00</td>
                            </tr>
                            <tr>
                                <td>归还时间</td>
                                <td colspan="2">2020-1-2 12：00</td>
                            </tr>
                            <tr>
                                <td>单价</td>
                                <td colspan="2">￥200</td>
                            </tr>
                            <tr>
                                <td>超时售价</td>
                                <td colspan="2">￥8/h</td>
                            </tr>
                            <tr>
                                <td>车位所属物业</td>
                                <td>哈哈物业</td>
                                <td><button>联系物业</button></td>
                            </tr>
                            <tr>
                                <td>车位所属业主</td>
                                <td>嗯嗯</td>
                                <td><button>联系业主</button></td>
                            </tr>
                        </table>
                    </el-dialog>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="deleteOrders(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage - 0"
            :page-sizes="[2, 3, 4, 5]"
            :page-size="pageSize - 0"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
    "orders"
);
import apis from "../../http/apis/apis";
import axios from "../../http/axios";
export default {
    data() {
        return {
            dialogVisible: false,
            // 搜索的数据
            searchData: {
                value: "name",
                input: "",
                state: "",
            },
            // select的值
            options: [
                {
                    value: "name",
                    label: "用户",
                },
                {
                    value: "parkingLocation",
                    label: "租车地址",
                },
                {
                    value: "orderStart",
                    label: "下单时间",
                },
            ],
        };
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
    },

    mounted() {
        this.getOrders(this.searchData);
    },
    computed: {
        ...mapState([
            "ordersData",
            "pageSize",
            "currentPage",
            "total",
            "pages",
        ]),
    },
    methods: {
        ...mapActions(["getOrders", "deleteOrders"]),

        // 分页
        handleSizeChange(val) {
            this.changePageSize(val);
            this.getOrders(this.searchData);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
            this.getOrders(this.searchData);
        },

        // 拿取分页方法
        ...mapMutations([
            "firstPage",
            "lastPage",
            "prevPage",
            "nextPage",
            "changePageSize",
            "changeCurrentPage",
        ]),
        // 查看详情弹框
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
    },
};
</script>
<style  scoped>
.el-table th,
.el-table td {
    text-align: center;
}
.el-button {
    margin-left: 10px;
}
.search {
    text-align: left;
    width: 100%;
    display: flex;
    margin-bottom: 10px;
}
#ordersState {
    margin-left: 420px;
    color: #909399;
    border: 1px solid black;
    border-radius: 10px;
}

/* 弹框表格样式 */
#a {
    width: 500px;
    height: 300px;
    border: 1px solid rgb(192, 191, 191);
}
th,
td {
    border: 1px solid rgb(192, 191, 191);
    text-align: center;
    padding: 10px 20px;
}
</style>